<template>
  <tableLayout :columns="columns" :get="getData" ref="layout" :selectItem="selectItem"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
    <template v-slot:status="item">
      测试-{{ item.value.text.name }}
    </template>
    <template #button>
      <a-button type="primary" style="margin-left: 20px" @click='add'>新增</a-button>
      <a-button style="margin-left: 20px" @click="edit" :disabled="selectedRowKeys.length !== 1">修改</a-button>
      <a-button type="primary" style="margin-left: 20px" @click="del" :disabled="selectedRowKeys.length !== 1"
        danger>删除</a-button>
    </template>
    <template #operationMore="item">
      <a @click="edit(null,item.value.record)">编辑</a>
      <a-divider type="vertical" />
      <a @click="del(null,item.value.record.Id)">删除</a>
    </template>
    <template v-slot:custom="data">
      <a-input v-model:value="data.formData[data.key]" />
    </template>
  </tableLayout>
  <a-modal :title="formState.Id ? '编辑项目' : '新增项目'" v-model:visible="model_visible" :confirm-loading="confirmLoading"
    @ok="model_handleOk" width="900px">
    <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules"
      layout="inline" class="comform">
      <a-form-item label="名称" style="width: calc(50% - 20px);" class="form__item" name="Name">
        <a-input v-model:value="formState.Name" />
      </a-form-item>
      <a-form-item label="编码" style="width: calc(50% - 20px);" class="form__item" name="Code">
        <a-input v-model:value="formState.Code" />
      </a-form-item>
      <a-form-item label="路由Key" style="width: calc(50% - 20px);" class="form__item" name="RouteKey">
        <a-input v-model:value="formState.RouteKey" />
      </a-form-item>
      <a-form-item label="Secret" style="width: calc(50% - 20px);" class="form__item" name="Secret">
        <a-input v-model:value="formState.Secret" />
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeMount, nextTick, UnwrapRef, reactive } from 'vue';
import tableLayout from '@/components/tableLayout/tableLayout.vue';
import { getData, setProject, delProject } from '@/api/syssetting/project';
import { ProjectInput } from '@/types/api/syssetting/project';
import { Layout, message } from 'ant-design-vue';

export default defineComponent({
  name: 'sys_project',
  components: {
    tableLayout
  },
  setup() {
    const layout = ref();
    //列表
    const columns = [
      { title: '序号', dataIndex: 'Id' },
      { title: '编码', dataIndex: 'Code' },
      { title: '名称', dataIndex: 'Name' },
      { title: '创建时间', dataIndex: 'CreateTime' },
      { title: 'Secret', dataIndex: 'Secret' },
      { title: '路由Key', dataIndex: 'RouteKey' },
      { title: '最后修改时间', dataIndex: 'LastTime' }
    ]

    // 筛选
    const selectItem = ref([
      { title: '编码', key: 'Code', type: 'input', itemWidth: '290px' },
      { title: '名称', key: 'Name', type: 'input', itemWidth: '290px' },
      { title: '路由Key', key: 'RouteKey', type: 'input', itemWidth: '290px' },
    ])

    // 规则
    const rules = {
      Code: [{ required: true, message: '请输入编码', trigger: 'change' }],
      Name: [{ required: true, message: '请输入名称', trigger: 'change' }],
      Secret: [{ required: true, message: '请输入Secret', trigger: 'change' }],
      RouteKey: [{ required: true, message: '请输入路由Key', trigger: 'change' }]
    }

    //表单对象
    const formState: UnwrapRef<ProjectInput> = reactive({
      Id: 0,
      Name: '',
      Code: '',
      AppId: '',
      Secret: '',
      Remark: '',
      RouteKey: ''
    });

    const add = () => {
      model_visible.value = true;
      Object.assign(formState, {
        Id: 0,
        Name: '',
        Code: '',
        AppId: '',
        Secret: '',
        Remark: '',
        RouteKey: ''
      });
    }

    const edit = (event:any,item: any) => {
      let selectItem = item;
      if (!selectItem) {
        if (!selectedRowKeys.value || selectedRowKeys.value.length <= 0 || selectedRowKeys.value.length > 1) {
          message.warning('请先选择一条数据!');
          return;
        }
        selectItem = selectedRows.value[0];
      }
      model_visible.value = true;
      Object.assign(formState, selectItem);
    }

    const del = (event:any,id: any) => {
      let selectId = id;
      if (!selectId) {
        if (!selectedRowKeys.value || selectedRowKeys.value.length <= 0 || selectedRowKeys.value.length > 1) {
          message.warning('请先选择一条数据!');
          return;
        }
        selectId = selectedRows.value[0].Id;
      }

      delProject({ Id: selectId }).then(() => {
        message.success("删除成功!");
        layout.value.getData();
      }).catch(err => {
        message.error(err.message || "删除失败!")
        confirmLoading.value = false;
      })
    }

    const model_visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const formRef = ref()

    const model_handleOk = () => {
      formRef.value.validate().then(() => {
        confirmLoading.value = true;
        setProject(formState).then(e => {
          message.success("添加成功！");
          confirmLoading.value = false;
          model_visible.value = false;
          layout.value.getData();
        }).catch(err => {
          message.error(err.message || "添加失败!")
          confirmLoading.value = false;
        })
      }).catch(() => {
        message.error('请检查必填项是否全部填写!');
      })
    }

    // 多选
    const selectedRowKeys = ref<any[]>([]);
    const selectedRows = ref<any[]>([]);
    const onSelectChange = (keys: [], rows: any) => {
      selectedRowKeys.value = keys;
      selectedRows.value = rows;
    }


    const labelCol = { span: 6 };
    const wrapperCol = { span: 18 };

    return {
      columns, getData, selectItem, rules, formState, add, edit, del, model_visible,
      confirmLoading, formRef, labelCol, wrapperCol, onSelectChange, selectedRowKeys, selectedRows, layout
      , model_handleOk
    }
  }
})
</script>